﻿<!DOCTYPE html>
<html>
<head>

    <style>
        html, body, #map-canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        .controls {
            margin-top: 16px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 400px;
        }

            #pac-input:focus {
                border-color: #4d90fe;
            }

        .pac-container {
            font-family: Roboto;
        }

        #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }

            #type-selector label {
                font-family: Roboto;
                font-size: 13px;
                font-weight: 300;
            }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

    <script>
	var map;
var markers = [];
function initialize() {

    var latValue = GetControlValue(GET_WebResource_PARAMETER('lat'));
    var lngValue = GetControlValue(GET_WebResource_PARAMETER('lng'));
    var latInitValue = 25.000271;
    var lngInitValue = 46.530435;
    var zoom = 13;
    if(latValue != 0 && lngValue != 0)
    {
        latInitValue = latValue  ;
        lngInitValue = lngValue;
        zoom = 15;
    }

  var mapOptions = {
      center: new google.maps.LatLng(latInitValue, lngInitValue),
      zoom: zoom
  };
	map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  google.maps.event.addListener(map, 'click', function(e) {
   // placeMarker(e.latLng, map);
addMarker(e.latLng);
  });
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

 //   infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
 //   infowindow.open(map, marker);
     infowindow.setContent('<div><br><strong>Click on your place</strong>' );
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    google.maps.event.addDomListener(radioButton, 'click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  //setupClickListener('changetype-address', ['address']);
 // setupClickListener('changetype-establishment', ['establishment']);
 // setupClickListener('changetype-geocode', ['geocode']);


  if (latValue != 0 && lngValue != 0) {
      addMarker(new google.maps.LatLng(latValue, lngValue));
  }
  //else {
  //    addMarker(new google.maps.LatLng(25.000271, 46.530435));
  //}
}
function addMarker(location) {
deleteMarkers();
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
    // alert(location);

  var keys = Object.keys(location);

  document.getElementById("txtLat").innerHTML = location.lat();//[ keys[0]];
  document.getElementById("txtLng").innerHTML = location.lng();//[keys[1]];//location.K;
  SetControlValue(GET_WebResource_PARAMETER('lat'), location.lat());
  SetControlValue(GET_WebResource_PARAMETER('lng'), location.lng());
  var urlFieldName = GET_WebResource_PARAMETER('url');
  if(urlFieldName != 0)
  {
      var mapURL = 'https://www.google.com/maps?q='+location.lat()+','+location.lng();
      SetControlValue(urlFieldName, mapURL);
  }

 //window.parent.googleMap(location);
 //opener.document.getElementById("txtLatLng").innerHTM = location.A + "," + location.F;// "document.frm.c_name.value";
 //alert("test");
// self.close();
}
function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
alert(position);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <script>


          function GET_WebResource_PARAMETER(paramName) {
              //Get the any query string parameters and load them
              //into the vals array

              var vals = new Array();
              if (location.search != "") {
                  vals = location.search.substr(1).split("&");
                  for (var i in vals) {
                      vals[i] = vals[i].replace(/\+/g, " ").split("=");
                  }
                  //look for the parameter named 'data'
                  for (var i in vals) {
                      if (vals[i][0].toLowerCase() == "data") {
                          return parseDataValue(vals[i][1], paramName);
                          break;
                      }
                  }
              }
              return 0;
          }
          function parseDataValue(datavalue, paramName) {
              if (datavalue != "") {
                  var vals = new Array();

                  vals = decodeURIComponent(datavalue).split("&");
                  for (var i in vals) {
                      vals[i] = vals[i].replace(/\+/g, " ").split("=");

                      if (vals[i][0] == paramName) {
                          return vals[i][1];
                      }
                  }
              }
              return 0;
          }
          function SetControlValue(control, value) {
              window.parent.Xrm.Page.getAttribute(control).setValue(value);
              window.parent.Xrm.Page.getAttribute(control).setSubmitMode("always");
          }
          /////////////////////////////////////////////////////////////
          function GetControlValue(control) {
              var val = window.parent.Xrm.Page.getAttribute(control).getValue();
              if (val == null) {
                //  var name = window.parent.Xrm.Page.getAttribute(control).getName();
                //  alert("Value of " + val + " can't be null");
                  return 0;
              }
              return val;
          }

      
    </script>
</head>
<body>
    <input id="pac-input" class="controls" type="text"
           placeholder="Enter a location">
    <div id="type-selector" class="controls">
        <input type="radio" name="type" id="changetype-all" checked="checked">
        <label for="changetype-all">All</label>

        <!--<input type="radio" name="type" id="changetype-establishment">
        <label for="changetype-establishment">Establishments</label>

        <input type="radio" name="type" id="changetype-address">
        <label for="changetype-address">Addresses</label>

        <input type="radio" name="type" id="changetype-geocode">
        <label for="changetype-geocode">Geocodes</label>-->
    </div>
    <div id="map-canvas"></div>
    <div id="map-values">
        Latitude : <span id="txtLat"></span><br>
        Longtude : <span id="txtLng"></span><br />
        <!--<a href="javascript:void(0);" name="My Window Name" onclick='window.close();'>Save This Location</a>-->
    </div>
</body>
</html>